<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>阳光信托物业 - 原型图</title>
    <!-- WeUI -->
    <link rel="stylesheet" href="https://weui.io/style/weui.min.css" />
    <!-- Element UI -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <!-- Custom Styles -->
    <link rel="stylesheet" href="style.css" />
    <style>
      /* 移动端页面容器统一高度和滚动 */
      .mobile-view {
        width: 375px;
        height: 812px;
        overflow-y: auto;
        border-radius: 20px;
        margin: 0 16px 32px 0;
        box-shadow: 0 2px 12px #0001;
        display: inline-block;
        vertical-align: top;
        position: relative;
      }
      .mobile-view .weui-navbar {
        min-height: 44px;
        padding: 0;
      }
    </style>
  </head>
  <body data-weui-theme="light">
    <h1>阳光信托物业 - 原型图</h1>

    <div class="page-container">
      <!-- 移动端页面 -->
      <h2>移动端 - 业主/租户模块</h2>
      <div class="page-row">
        <!-- 注册页（严格WeUI结构） -->
        <div class="mobile-view">
          <div class="weui-navbar">
            <div class="weui-navbar__item weui-navbar__title">业主/租户注册</div>
          </div>
          <form
            class="weui-form"
            autocomplete="off"
            style="height: 100%; display: flex; flex-direction: column"
          >
            <div class="weui-form__text-area">
              <h2 class="weui-form__title">请选择您的小区和房产信息</h2>
            </div>
            <div class="weui-form__control-area" style="flex: 1">
              <div class="weui-cells__group weui-cells__group_form">
                <div class="weui-cells weui-cells_form">
                  <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label">小区</label></div>
                    <div class="weui-cell__bd">
                      <select class="weui-select" id="register-community">
                        <!-- JS填充 -->
                      </select>
                    </div>
                  </div>
                  <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label">楼栋</label></div>
                    <div class="weui-cell__bd">
                      <select class="weui-select" id="register-building">
                        <option>1栋</option>
                        <option>2栋</option>
                        <option>3栋</option>
                      </select>
                    </div>
                  </div>
                  <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label">单元</label></div>
                    <div class="weui-cell__bd">
                      <select class="weui-select" id="register-unit">
                        <option>1单元</option>
                        <option>2单元</option>
                      </select>
                    </div>
                  </div>
                  <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label">门牌号</label></div>
                    <div class="weui-cell__bd">
                      <input class="weui-input" type="text" placeholder="请输入门牌号" required />
                    </div>
                  </div>
                </div>
              </div>
              <div class="weui-cells__group weui-cells__group_form">
                <div class="weui-cells__title">请填写您的个人信息</div>
                <div class="weui-cells weui-cells_form">
                  <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
                    <div class="weui-cell__bd">
                      <input
                        class="weui-input"
                        type="text"
                        placeholder="请输入您的真实姓名"
                        required
                      />
                    </div>
                  </div>
                  <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
                    <div class="weui-cell__bd">
                      <input
                        class="weui-input"
                        type="tel"
                        placeholder="请输入您的手机号"
                        required
                      />
                    </div>
                    <div class="weui-cell__ft">
                      <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default">
                        获取验证码
                      </a>
                    </div>
                  </div>
                  <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
                    <div class="weui-cell__bd">
                      <input
                        class="weui-input"
                        type="text"
                        placeholder="请输入手机号验证码"
                        required
                      />
                    </div>
                  </div>
                  <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label">角色类型</label></div>
                    <div class="weui-cell__bd">
                      <label class="weui-radio__label">
                        <input type="radio" class="weui-radio" name="role" value="业主" checked />
                        <span>业主</span>
                      </label>
                      <label class="weui-radio__label" style="margin-left: 16px">
                        <input type="radio" class="weui-radio" name="role" value="租户" />
                        <span>租户</span>
                      </label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="weui-form__tips-area">
              <p class="weui-form__tips">提交后需物业管理员审核</p>
            </div>
            <div class="weui-form__opr-area">
              <a class="weui-btn weui-btn_primary" href="javascript:">提交审核</a>
            </div>
            <div class="weui-form__extra-area">
              <div class="weui-footer">
                <p class="weui-footer__links">
                  <a href="javascript:void(0);" class="weui-footer__link">已有账号？去登录</a>
                </p>
              </div>
            </div>
          </form>
        </div>
        <!-- 业主首页 -->
        <div class="mobile-view">
          <div class="weui-page" data-weui-theme="light">
            <div class="weui-navbar">
              <div class="weui-navbar__item weui-navbar__title">业主首页</div>
            </div>
            <div class="weui-panel">
              <div class="weui-panel__bd weui-cell_active">
                <div
                  class="weui-media-box weui-media-box_appmsg"
                  onclick="document.getElementById('resident-personal-center').scrollIntoView({behavior: 'smooth'})"
                  style="
                    cursor: pointer;
                    padding: 12px 0px 8px 16;
                    display: flex;
                    align-items: center;
                  "
                >
                  <div style="flex: 1; min-width: 0">
                    <div
                      style="
                        font-size: 19px;
                        font-weight: 600;
                        color: #222;
                        line-height: 1.3;
                        margin-bottom: 2px;
                        word-break: break-all;
                      "
                    >
                      紫金小区
                    </div>
                    <div
                      style="
                        font-size: 15px;
                        color: #888;
                        line-height: 1.2;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                      "
                    >
                      <span id="resident-name"></span>
                      <span id="resident-phone" style="margin-left: 12px"></span>
                    </div>
                  </div>
                  <div style="margin-left: 8px; display: flex; align-items: center">
                    <span>切换小区</span>
                    <i class="weui-icon-arrow" style="color: #c8c8cd"></i>
                  </div>
                </div>
              </div>
            </div>
            <div class="weui-panel">
              <div
                class="weui-panel__hd"
                style="display: flex; justify-content: space-between; align-items: center"
              >
                <span>资金总览</span>
                <a href="javascript:;" style="color: #07c160; font-size: 14px"></a>
              </div>
              <div class="weui-panel__bd">
                <div class="weui-media-box weui-media-box_text">
                  <h4 class="weui-media-box__title">
                    账户余额：
                    <span class="income">¥8,595.17</span>
                  </h4>
                  <p class="weui-media-box__desc">
                    本月收入：
                    <span class="income">¥8,145.67</span>
                    ，本月支出：
                    <span class="expense">¥-1,550.50</span>
                  </p>
                </div>
              </div>
            </div>
            <div class="weui-grids" style="background-color: #fff; margin-top: 10px">
              <a href="javascript:;" class="weui-grid">
                <div class="weui-grid__icon">
                  <img src="https://weui.io/images/icon_tabbar.png" alt="流水明细" />
                </div>
                <p class="weui-grid__label">流水明细</p>
              </a>
              <a href="javascript:;" class="weui-grid">
                <div class="weui-grid__icon">
                  <img src="https://weui.io/images/icon_tabbar.png" alt="用户管理" />
                </div>
                <p class="weui-grid__label">费用缴纳</p>
              </a>
            </div>
          </div>
        </div>

        <!-- 流水公示列表页（严格WeUI结构） -->
        <div class="mobile-view">
          <div class="weui-page" data-weui-theme="light">
            <div class="weui-navbar">
              <div class="weui-navbar__item weui-navbar__title">资金流水列表</div>
            </div>
            <div class="weui-panel">
              <div
                class="weui-panel__hd"
                style="display: flex; justify-content: space-between; align-items: center"
              >
                <span>资金总览</span>
                <a href="javascript:;" style="color: #07c160; font-size: 14px">紫金小区</a>
              </div>
              <div class="weui-panel__bd">
                <div class="weui-media-box weui-media-box_text">
                  <h4 class="weui-media-box__title">
                    账户余额：
                    <span class="income">¥8,595.17</span>
                  </h4>
                  <p class="weui-media-box__desc">
                    本月收入：
                    <span class="income">¥8,145.67</span>
                    ，本月支出：
                    <span class="expense">¥-1,550.50</span>
                  </p>
                </div>
              </div>
            </div>
            <div class="weui-panel">
              <div
                class="weui-panel__hd"
                style="display: flex; justify-content: space-between; align-items: center"
              >
                <span>资金流水</span>
                <a href="javascript:;" style="color: #07c160; font-size: 14px">类型 · 全部 ></a>
              </div>
              <div class="weui-panel__bd">
                <a href="javascript:;" class="weui-media-box weui-media-box_appmsg">
                  <div class="weui-media-box__bd">
                    <h4 class="weui-media-box__title">物业费</h4>
                    <p class="weui-media-box__desc">2024-05-20 10:30:00</p>
                  </div>
                  <div class="weui-media-box__ft"><span class="income">+5,000.00</span></div>
                </a>
                <a href="javascript:;" class="weui-media-box weui-media-box_appmsg">
                  <div class="weui-media-box__bd">
                    <h4 class="weui-media-box__title">电梯维保</h4>
                    <p class="weui-media-box__desc">2024-05-19 15:00:00</p>
                  </div>
                  <div class="weui-media-box__ft"><span class="expense">-1,200.50</span></div>
                </a>
                <a href="javascript:;" class="weui-media-box weui-media-box_appmsg">
                  <div class="weui-media-box__bd">
                    <h4 class="weui-media-box__title">停车费</h4>
                    <p class="weui-media-box__desc">2024-05-18 11:45:00</p>
                  </div>
                  <div class="weui-media-box__ft"><span class="income">+800.00</span></div>
                </a>
                <a href="javascript:;" class="weui-media-box weui-media-box_appmsg">
                  <div class="weui-media-box__bd">
                    <h4 class="weui-media-box__title">公共区域保洁</h4>
                    <p class="weui-media-box__desc">2024-05-17 18:20:00</p>
                  </div>
                  <div class="weui-media-box__ft"><span class="expense">-350.00</span></div>
                </a>
                <a href="javascript:;" class="weui-media-box weui-media-box_appmsg">
                  <div class="weui-media-box__bd">
                    <h4 class="weui-media-box__title">公共广告位收益</h4>
                    <p class="weui-media-box__desc">2024-05-16 09:00:00</p>
                  </div>
                  <div class="weui-media-box__ft"><span class="income">+2,345.67</span></div>
                </a>
              </div>
            </div>
          </div>
        </div>

        <!-- 流水详情页（严格WeUI结构） -->
        <div class="mobile-view">
          <div class="weui-page" data-weui-theme="light">
            <div class="weui-navbar">
              <div class="weui-navbar__item weui-navbar__title">流水详情</div>
            </div>
            <div class="weui-form weui-form_preview">
              <div class="weui-form-preview__hd">
                <div class="weui-form-preview__item">
                  <label class="weui-form-preview__label">交易金额</label>
                  <em class="weui-form-preview__value income">+5,000.00</em>
                </div>
              </div>
              <div class="weui-form-preview__bd">
                <div class="weui-form-preview__item">
                  <label class="weui-form-preview__label">摘要标志</label>
                  <span class="weui-form-preview__value">物业费</span>
                </div>
                <div class="weui-form-preview__item">
                  <label class="weui-form-preview__label">对方户名</label>
                  <span class="weui-form-preview__value">张三</span>
                </div>
                <div class="weui-form-preview__item">
                  <label class="weui-form-preview__label">对方账户</label>
                  <span class="weui-form-preview__value">6222021****12345678</span>
                </div>
                <div class="weui-form-preview__item">
                  <label class="weui-form-preview__label">交易时间</label>
                  <span class="weui-form-preview__value">2024-05-20 10:30:00</span>
                </div>
                <div class="weui-form-preview__item">
                  <label class="weui-form-preview__label">交易备注</label>
                  <span class="weui-form-preview__value">2024年上半年物业费</span>
                </div>
              </div>
              <div class="weui-form-preview__ft">
                <a
                  role="button"
                  class="weui-form-preview__btn weui-form-preview__btn_default"
                  href="javascript:;"
                >
                  返回
                </a>
              </div>
            </div>
          </div>
        </div>

        <!-- 个人信息页（严格WeUI结构） -->
        <div class="mobile-view">
          <div class="weui-page" data-weui-theme="light">
            <div class="weui-navbar">
              <div class="weui-navbar__item weui-navbar__title">个人中心</div>
            </div>
            <div class="weui-panel">
              <div
                class="weui-panel__bd"
                style="display: flex; align-items: center; padding: 16px 16px 8px 16px"
              >
                <div>
                  <h4 id="user-name" class="weui-media-box__title" style="margin: 0"></h4>
                  <p id="user-phone" class="weui-media-box__desc" style="margin: 0"></p>
                </div>
              </div>
            </div>
            <div class="weui-cells__title">我的小区</div>
            <div class="weui-cells">
              <a href="javascript:;" class="weui-cell weui-cell_access">
                <div class="weui-cell__bd"><p>紫金小区 1栋 1单元 101室</p></div>
                <div class="weui-cell__ft"><i class="weui-icon-success"></i></div>
              </a>
              <a href="javascript:;" class="weui-cell weui-cell_access">
                <div class="weui-cell__bd"><p>玄武湖小区 3栋 2单元 502室</p></div>
                <div class="weui-cell__ft"></div>
              </a>
              <div class="weui-cell weui-cell_active weui-cell_link weui-cell_access">
                <div class="weui-cell__bd">+ 添加更多小区</div>
              </div>
            </div>
            <div style="padding: 32px 16px">
              <a href="javascript:;" class="weui-btn weui-btn_warn">注销账号</a>
            </div>
          </div>
        </div>
      </div>

      <h2>移动端 - 物业管理模块</h2>
      <div class="page-row">
        <!-- 物业注册页（严格WeUI结构） -->
        <div class="mobile-view">
          <div class="weui-page" data-weui-theme="light">
            <div class="weui-navbar">
              <div class="weui-navbar__item weui-navbar__title">物业注册</div>
            </div>
            <form
              class="weui-form"
              autocomplete="off"
              style="height: 100%; display: flex; flex-direction: column"
            >
              <div class="weui-form__text-area">
                <h2 class="weui-form__title">物业公司管理员注册</h2>
              </div>
              <div class="weui-form__control-area" style="flex: 1">
                <div class="weui-cells__group weui-cells__group_form">
                  <div class="weui-cells weui-cells_form">
                    <div class="weui-cell">
                      <div class="weui-cell__hd"><label class="weui-label">小区名称</label></div>
                      <div class="weui-cell__bd">
                        <input class="weui-input" type="text" placeholder="紫金小区" required />
                      </div>
                    </div>
                    <div class="weui-cell">
                      <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
                      <div class="weui-cell__bd">
                        <input class="weui-input" type="text" placeholder="请输入姓名" required />
                      </div>
                    </div>
                    <div class="weui-cell">
                      <div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
                      <div class="weui-cell__bd">
                        <input class="weui-input" type="tel" placeholder="请输入手机号" required />
                      </div>
                      <div class="weui-cell__ft">
                        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default">
                          获取验证码
                        </a>
                      </div>
                    </div>
                    <div class="weui-cell">
                      <div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
                      <div class="weui-cell__bd">
                        <input class="weui-input" type="text" placeholder="请输入验证码" required />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="weui-form__opr-area">
                <a class="weui-btn weui-btn_primary" href="javascript:">提交注册</a>
              </div>
            </form>
          </div>
        </div>
        <!-- 物业主页（WeUI标准+icon） -->
        <div class="mobile-view">
          <div class="weui-page" data-weui-theme="light">
            <div class="weui-navbar">
              <div class="weui-navbar__item weui-navbar__title">物业管理</div>
            </div>
            <div class="weui-panel">
              <div class="weui-panel__bd">
                <a
                  href="javascript:;"
                  class="weui-media-box weui-media-box_appmsg weui-cell_active"
                >
                  <div class="weui-media-box__bd">
                    <h4 id="admin-name" class="weui-media-box__title"></h4>
                    <p id="admin-info" class="weui-media-box__desc"></p>
                  </div>
                  <div class="weui-media-box__ft">
                    <i class="weui-icon-arrow" style="color: #c8c8cd"></i>
                  </div>
                </a>
              </div>
            </div>
            <div class="weui-grids" style="background-color: #fff">
              <a href="javascript:;" class="weui-grid">
                <div class="weui-grid__icon">
                  <img src="https://weui.io/images/icon_tabbar.png" alt="用户审核" />
                </div>
                <p class="weui-grid__label">用户审核</p>
              </a>
              <a href="javascript:;" class="weui-grid">
                <div class="weui-grid__icon">
                  <img src="https://weui.io/images/icon_tabbar.png" alt="流水明细" />
                </div>
                <p class="weui-grid__label">流水明细</p>
              </a>
              <a href="javascript:;" class="weui-grid">
                <div class="weui-grid__icon">
                  <img src="https://weui.io/images/icon_tabbar.png" alt="用户管理" />
                </div>
                <p class="weui-grid__label">用户管理</p>
              </a>
              <a href="javascript:;" class="weui-grid">
                <div class="weui-grid__icon">
                  <img src="https://weui.io/images/icon_tabbar.png" alt="用户管理" />
                </div>
                <p class="weui-grid__label">收款码</p>
              </a>
            </div>
          </div>
        </div>

        <!-- 用户审核列表页（静态，无交互） -->
        <div class="mobile-view">
          <div class="weui-page" data-weui-theme="light">
            <div class="weui-navbar">
              <div class="weui-navbar__item weui-navbar__title">用户审核</div>
            </div>

            <div class="weui-tab">
              <div class="weui-navbar weui-tab__navbar">
                <div class="weui-navbar__item weui-bar__item_on">待审核</div>
                <div class="weui-navbar__item">已通过</div>
                <div class="weui-navbar__item">已驳回</div>
              </div>
              <div class="weui-tab__panel">
                <div class="weui-tab__content" style="display: block">
                  <div class="weui-panel weui-panel_access">
                    <div class="weui-panel__hd">共 2 条</div>
                    <div class="weui-panel__bd">
                      <div
                        class="weui-media-box weui-media-box_text weui-cell_active weui-cell_access"
                        style="margin-bottom: 0"
                      >
                        <h4 class="weui-media-box__title">王小明 - 业主</h4>
                        <p class="weui-media-box__desc">手机号：138****0000</p>
                        <p class="weui-media-box__desc">申请时间：2024-05-20 10:30:00</p>
                        <div class="weui-cell__ft"></div>
                      </div>
                      <div
                        class="weui-media-box weui-media-box_text weui-cell_active weui-cell_access"
                        style="margin-bottom: 0"
                      >
                        <h4 class="weui-media-box__title">李丽 - 租户</h4>
                        <p class="weui-media-box__desc">手机号：138****0000</p>
                        <p class="weui-media-box__desc">申请时间：2024-05-19 09:15:00</p>
                        <div class="weui-cell__ft"></div>
                      </div>
                      <div
                        class="weui-media-box weui-media-box_text weui-cell_active weui-cell_access"
                        style="margin-bottom: 0"
                      >
                        <h4 class="weui-media-box__title">王明 - 物业人员</h4>
                        <p class="weui-media-box__desc">手机号：138****0000</p>
                        <p class="weui-media-box__desc">申请时间：2024-05-20 10:30:00</p>
                        <div class="weui-cell__ft"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="weui-tab__content">
                  <div class="weui-panel weui-panel_access" style="background-color: #fff">
                    <div class="weui-panel__hd">共 3 条</div>
                    <div class="weui-panel__bd">
                      <div
                        class="weui-media-box weui-media-box_text weui-cell_active weui-cell_access"
                        style="margin-bottom: 0"
                      >
                        <h4 class="weui-media-box__title">张三 - 业主</h4>
                        <p class="weui-media-box__desc">申请房产：紫金小区 2栋 3单元 201室</p>
                        <p class="weui-media-box__desc">申请时间：2024-05-18 14:20:00</p>
                        <div class="weui-cell__ft"></div>
                      </div>
                      <div
                        class="weui-media-box weui-media-box_text weui-cell_active weui-cell_access"
                        style="margin-bottom: 0"
                      >
                        <h4 class="weui-media-box__title">陈** - 租户</h4>
                        <p class="weui-media-box__desc">申请房产：玄武湖小区 1栋 1单元 301室</p>
                        <p class="weui-media-box__desc">申请时间：2024-05-17 16:45:00</p>
                        <div class="weui-cell__ft"></div>
                      </div>
                      <div
                        class="weui-media-box weui-media-box_text weui-cell_active weui-cell_access"
                        style="margin-bottom: 0"
                      >
                        <h4 class="weui-media-box__title">郑** - 业主</h4>
                        <p class="weui-media-box__desc">申请房产：紫金小区 4栋 1单元 603室</p>
                        <p class="weui-media-box__desc">申请时间：2024-05-19 10:10:00</p>
                        <div class="weui-cell__ft"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="weui-tab__content">
                  <div class="weui-panel weui-panel_access" style="background-color: #fff">
                    <div class="weui-panel__hd">共 1 条</div>
                    <div class="weui-panel__bd">
                      <div
                        class="weui-media-box weui-media-box_text weui-cell_active weui-cell_access"
                        style="margin-bottom: 0"
                      >
                        <h4 class="weui-media-box__title">赵六 - 租户</h4>
                        <p class="weui-media-box__desc">申请房产：雨花客厅 5栋 2单元 801室</p>
                        <p class="weui-media-box__desc">申请时间：2024-05-16 11:30:00</p>
                        <div class="weui-cell__ft"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 申请信息详情页（静态，无交互） -->
        <div class="mobile-view">
          <div class="weui-page" data-weui-theme="light">
            <div class="weui-navbar">
              <div class="weui-navbar__item weui-navbar__title">申请信息详情</div>
            </div>
            <div class="weui-form weui-form_preview">
              <div class="weui-form-preview__hd">
                <div class="weui-form-preview__item">
                  <label class="weui-form-preview__label">申请人</label>
                  <em class="weui-form-preview__value">王小明</em>
                </div>
              </div>
              <div class="weui-form-preview__bd">
                <div class="weui-form-preview__item">
                  <label class="weui-form-preview__label">角色</label>
                  <span class="weui-form-preview__value">业主</span>
                </div>
                <div class="weui-form-preview__item">
                  <label class="weui-form-preview__label">房产信息</label>
                  <span class="weui-form-preview__value">紫金小区 1栋 1单元 101室</span>
                </div>
                <div class="weui-form-preview__item">
                  <label class="weui-form-preview__label">申请时间</label>
                  <span class="weui-form-preview__value">2024-05-20 10:30:00</span>
                </div>
              </div>
              <div class="weui-form-preview__ft">
                <a
                  role="button"
                  class="weui-form-preview__btn weui-form-preview__btn_default"
                  href="javascript:;"
                >
                  驳回
                </a>
                <a
                  role="button"
                  class="weui-form-preview__btn weui-form-preview__btn_primary"
                  href="javascript:;"
                >
                  通过
                </a>
              </div>
            </div>
          </div>
        </div>

        <!-- 用户管理列表页 -->
        <div class="mobile-view">
          <div class="weui-page" data-weui-theme="light">
            <div class="weui-navbar">
              <div class="weui-navbar__item weui-navbar__title">用户管理</div>
            </div>
            <div class="weui-search-bar" id="searchBar">
              <form class="weui-search-bar__form">
                <div class="weui-search-bar__box">
                  <i class="weui-icon-search"></i>
                  <input
                    type="search"
                    class="weui-search-bar__input"
                    placeholder="搜索姓名或手机号"
                  />
                  <a href="javascript:" class="weui-icon-clear" style="display: none"></a>
                </div>
                <label class="weui-search-bar__label" style="display: none">
                  <i class="weui-icon-search"></i>
                  <span>搜索</span>
                </label>
              </form>
            </div>
            <div id="managed-users-list" class="weui-panel weui-panel_access">
              <div
                class="weui-panel__hd"
                style="display: flex; justify-content: space-between; align-items: center"
              >
                <span>紫金小区用户列表</span>
                <a href="javascript:;" style="color: #07c160; font-size: 14px">类型 · 全部 ></a>
              </div>
              <div class="weui-panel__bd">
                <!-- JS will render this part -->
              </div>
            </div>
          </div>
        </div>

        <!-- 用户详情页（物业端，WeUI预览结构，参考流水详情） -->
        <div class="mobile-view">
          <div class="weui-page" data-weui-theme="light">
            <div class="weui-navbar">
              <div class="weui-navbar__item weui-navbar__title">用户详情</div>
            </div>
            <div class="weui-form weui-form_preview">
              <div class="weui-form__bd" id="managed-user-details"></div>
              <div class="weui-form-preview__ft">
                <a
                  role="button"
                  class="weui-form-preview__btn weui-form-preview__btn_default"
                  href="javascript:;"
                >
                  禁用
                </a>
                <a
                  role="button"
                  class="weui-form-preview__btn weui-form-preview__btn_primary"
                  href="javascript:;"
                >
                  删除
                </a>
              </div>
            </div>
          </div>
        </div>

        <!-- 物业管理员个人中心页（严格WeUI结构） -->
        <div class="mobile-view" id="admin-personal-center">
          <div class="weui-page" data-weui-theme="light">
            <div class="weui-navbar">
              <div class="weui-navbar__item weui-navbar__title">个人中心</div>
            </div>
            <div class="weui-panel">
              <div class="weui-panel__bd" style="padding: 16px 16px 8px 16px">
                <h4 id="admin-center-name" class="weui-media-box__title" style="margin: 0"></h4>
                <p id="admin-center-phone" class="weui-media-box__desc" style="margin: 0"></p>
                <p id="admin-center-community" class="weui-media-box__desc" style="margin: 0"></p>
              </div>
            </div>
            <div style="padding: 32px 16px">
              <a href="javascript:;" class="weui-btn weui-btn_warn">注销账户</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- PC 端页面 -->
    <h2>管理端 - 银行运营人员模块</h2>
    <div class="pc-view">
      <div id="pc-app">
        <el-container>
          <el-aside>
            <el-menu
              default-active="1"
              class="el-menu-vertical-demo"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
            >
              <el-menu-item-group>
                <template slot="title">运营管理后台</template>
                <el-menu-item index="1">
                  <i class="el-icon-office-building"></i>
                  小区信息管理
                </el-menu-item>
                <el-menu-item index="2">
                  <i class="el-icon-bank-card"></i>
                  监管账户管理
                </el-menu-item>
                <el-menu-item index="3">
                  <i class="el-icon-user"></i>
                  物业管理员管理
                </el-menu-item>
                <el-menu-item index="4">
                  <i class="el-icon-finished"></i>
                  审核中心
                </el-menu-item>
              </el-menu-item-group>
            </el-menu>
          </el-aside>
          <el-main>
            <!-- 小区信息管理 -->
            <div class="pc-page-section">
              <h3>小区信息管理</h3>
              <div class="filter-bar">
                <el-input placeholder="按小区名称搜索" style="width: 200px"></el-input>
                <el-button type="primary" icon="el-icon-search">搜索</el-button>
                <el-button type="success" icon="el-icon-plus">新增小区</el-button>
              </div>
              <el-table :data="mockData.communities" stripe style="width: 100%">
                <el-table-column prop="name" label="小区名称"></el-table-column>
                <el-table-column prop="address" label="地址"></el-table-column>
                <el-table-column prop="propertyCompany" label="物业公司"></el-table-column>
                <el-table-column prop="bankAccount" label="监管账户"></el-table-column>
                <el-table-column prop="status" label="状态">
                  <template slot-scope="scope">
                    <el-tag
                      :type="scope.row.status === '正常' ? 'success' : 'danger'"
                      disable-transitions
                    >
                      {{ scope.row.status }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template>
                    <el-button type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small">删除</el-button>
                    <el-button type="text" size="small">导入楼栋</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <!-- 小区监管账户管理 -->
            <div class="pc-page-section">
              <h3>小区监管账户管理</h3>
              <div class="filter-bar">
                <el-input placeholder="按小区名称/账户号搜索" style="width: 240px"></el-input>
                <el-button type="primary" icon="el-icon-search">搜索</el-button>
                <el-button type="success" icon="el-icon-plus">新增账户</el-button>
                <el-button type="warning" icon="el-icon-upload2">批量导入</el-button>
              </div>
              <el-table :data="mockData.bankAccounts" stripe style="width: 100%">
                <el-table-column prop="communityName" label="关联小区"></el-table-column>
                <el-table-column prop="accountNumber" label="监管账户"></el-table-column>
                <el-table-column prop="bankName" label="开户行"></el-table-column>
                <el-table-column prop="status" label="状态">
                  <template slot-scope="scope">
                    <el-tag
                      :type="scope.row.status === '正常' ? 'success' : 'danger'"
                      disable-transitions
                    >
                      {{ scope.row.status }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="hasQrcode" label="收款码">
                  <template slot-scope="scope">
                    <i
                      :class="scope.row.hasQrcode ? 'el-icon-success' : 'el-icon-error'"
                      :style="{ color: scope.row.hasQrcode ? '#67C23A' : '#F56C6C' }"
                    ></i>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template>
                    <el-button type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small">删除</el-button>
                    <el-button type="text" size="small">配置二维码</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <!-- 小区物业管理员管理 -->
            <div class="pc-page-section">
              <h3>小区物业管理员管理</h3>
              <div class="filter-bar">
                <el-input placeholder="按姓名/手机号/小区搜索" style="width: 240px"></el-input>
                <el-button type="primary" icon="el-icon-search">搜索</el-button>
                <el-button type="success" icon="el-icon-plus">新增管理员</el-button>
                <el-button type="warning" icon="el-icon-upload2">批量导入</el-button>
              </div>
              <el-table :data="mockData.propertyAdmins" stripe style="width: 100%">
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="phone" label="手机号(登录账号)"></el-table-column>
                <el-table-column prop="communityName" label="所管辖的小区"></el-table-column>
                <el-table-column prop="status" label="状态">
                  <template slot-scope="scope">
                    <el-tag
                      :type="scope.row.status === '正常' ? 'success' : 'danger'"
                      disable-transitions
                    >
                      {{ scope.row.status }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template>
                    <el-button type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <!-- 审核中心 -->
            <div class="pc-page-section">
              <h3>审核中心</h3>
              <el-tabs value="pending">
                <el-tab-pane label="待审核" name="pending">
                  <el-table :data="mockData.pcApprovals.filter(a => a.status === '待审核')" stripe>
                    <el-table-column prop="type" label="审核类型"></el-table-column>
                    <el-table-column prop="summary" label="摘要"></el-table-column>
                    <el-table-column prop="applicant" label="申请人"></el-table-column>
                    <el-table-column prop="applyTime" label="申请时间"></el-table-column>
                    <el-table-column label="操作">
                      <template>
                        <el-button type="text" size="small">通过</el-button>
                        <el-button type="text" size="small">驳回</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-tab-pane>
                <el-tab-pane label="已通过" name="approved">
                  <el-table :data="mockData.pcApprovals.filter(a => a.status === '已通过')" stripe>
                    <el-table-column prop="type" label="审核类型"></el-table-column>
                    <el-table-column prop="summary" label="摘要"></el-table-column>
                    <el-table-column prop="applicant" label="申请人"></el-table-column>
                    <el-table-column prop="applyTime" label="申请时间"></el-table-column>
                  </el-table>
                </el-tab-pane>
                <el-tab-pane label="已驳回" name="rejected">
                  <el-table :data="mockData.pcApprovals.filter(a => a.status === '已驳回')" stripe>
                    <el-table-column prop="type" label="审核类型"></el-table-column>
                    <el-table-column prop="summary" label="摘要"></el-table-column>
                    <el-table-column prop="applicant" label="申请人"></el-table-column>
                    <el-table-column prop="applyTime" label="申请时间"></el-table-column>
                  </el-table>
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-main>
        </el-container>
      </div>
    </div>

    <!-- Scripts -->
    <script src="data.js"></script>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        // --- Mobile View Rendering ---

        // 注册页小区下拉填充
        const registerCommunity = document.getElementById('register-community')
        if (registerCommunity && mockData.communities) {
          registerCommunity.innerHTML = mockData.communities
            .map((c) => `<option>${c.name}</option>`)
            .join('')
        }

        // 流水公示列表页
        const transactionList = document.getElementById('transaction-list')
        if (transactionList) {
          const transactions = mockData.transactions.comm001
          if (transactions && transactions.length > 0) {
            transactions.forEach((tx) => {
              const isIncome = tx.transactionType === '收入'
              const amountClass = isIncome ? 'income' : 'expense'
              const item = document.createElement('a')
              item.className = 'weui-media-box weui-media-box_appmsg weui-cell_active'
              item.href = 'javascript:;'
              item.innerHTML = `
                <div class="weui-media-box__bd">
                  <h4 class="weui-media-box__title">${tx.summary}</h4>
                  <p class="weui-media-box__desc">${tx.transactionTime}</p>
                </div>
                <div class="weui-media-box__ft" style="text-align: right;">
                  <span class="transaction-amount ${amountClass}">${tx.amount}</span>
                </div>
              `
              transactionList.appendChild(item)
            })
          } else {
            transactionList.innerHTML =
              '<div class="weui-loadmore weui-loadmore_line"><span class="weui-loadmore__tips">暂无数据</span></div>'
          }
        }

        // 流水详情页
        const transactionDetails = document.getElementById('transaction-details')
        if (transactionDetails) {
          const tx = mockData.transactions.comm001[0] // 示例展示第一条
          if (tx) {
            transactionDetails.innerHTML = `
              <div class="weui-form-preview__hd">
                  <div class="weui-form-preview__item">
                      <label class="weui-form-preview__label">交易金额</label>
                      <em class="weui-form-preview__value ${
                        tx.transactionType === '收入' ? 'income' : 'expense'
                      }">${tx.amount}</em>
                  </div>
              </div>
              <div class="weui-form-preview__bd">
                  <div class="weui-form-preview__item">
                      <label class="weui-form-preview__label">摘要标志</label>
                      <span class="weui-form-preview__value">${tx.summary}</span>
                  </div>
                  <div class="weui-form-preview__item">
                      <label class="weui-form-preview__label">对方户名</label>
                      <span class="weui-form-preview__value">${tx.otherPartyName}</span>
                  </div>
                  <div class="weui-form-preview__item">
                      <label class="weui-form-preview__label">对方账户</label>
                      <span class="weui-form-preview__value">${tx.otherPartyAccount}</span>
                  </div>
                  <div class="weui-form-preview__item">
                      <label class="weui-form-preview__label">交易时间</label>
                      <span class="weui-form-preview__value">${tx.transactionTime}</span>
                  </div>
                  <div class="weui-form-preview__item">
                      <label class="weui-form-preview__label">交易备注</label>
                      <span class="weui-form-preview__value">${tx.remarks}</span>
                  </div>
              </div>
            `
          } else {
            transactionDetails.innerHTML =
              '<div class="weui-loadmore weui-loadmore_line"><span class="weui-loadmore__tips">暂无数据</span></div>'
          }
        }

        // 个人信息页
        const residentUser = mockData.currentUser.resident
        const userAvatar = document.getElementById('user-avatar')
        const userName = document.getElementById('user-name')
        const userPhone = document.getElementById('user-phone')
        const propertiesContainer = document.getElementById('user-properties')
        if (userAvatar) userAvatar.src = residentUser.avatar
        if (userName) userName.textContent = residentUser.name
        if (userPhone) userPhone.textContent = `手机号: ${residentUser.phone}`
        if (propertiesContainer) {
          propertiesContainer.innerHTML = ''
          if (residentUser.properties && residentUser.properties.length > 0) {
            residentUser.properties.forEach((prop) => {
              const cell = document.createElement('div')
              cell.className = 'weui-cell'
              cell.innerHTML = `<div class="weui-cell__bd"><p>${prop.propertyInfo}</p></div>`
              propertiesContainer.appendChild(cell)
            })
          } else {
            propertiesContainer.innerHTML =
              '<div class="weui-loadmore weui-loadmore_line"><span class="weui-loadmore__tips">暂无房产</span></div>'
          }
        }

        // 小区选择页
        const communityList = document.getElementById('community-list')
        if (communityList) {
          communityList.innerHTML = ''
          if (residentUser.properties && residentUser.properties.length > 0) {
            residentUser.properties.forEach((prop, index) => {
              const cell = document.createElement('a')
              cell.className = 'weui-cell weui-cell_access'
              cell.href = 'javascript:;'
              cell.innerHTML = `
                <div class="weui-cell__bd"><p>${prop.propertyInfo}</p></div>
                ${
                  index === 0
                    ? '<div class="weui-cell__ft"><i class="weui-icon-success"></i></div>'
                    : '<div class="weui-cell__ft"></div>'
                }
              `
              communityList.appendChild(cell)
            })
          } else {
            communityList.innerHTML =
              '<div class="weui-loadmore weui-loadmore_line"><span class="weui-loadmore__tips">暂无可切换小区</span></div>'
          }
        }

        // 物业主页
        const adminUser = mockData.currentUser.propertyAdmin
        const adminAvatar = document.getElementById('admin-avatar')
        const adminName = document.getElementById('admin-name')
        const adminInfo = document.getElementById('admin-info')
        if (adminAvatar) adminAvatar.src = adminUser.avatar
        if (adminName) adminName.textContent = `${adminUser.name} (欢迎您)`
        if (adminInfo)
          adminInfo.textContent = `手机号: ${adminUser.employeeId} | ${adminUser.communityName}`

        // 物业管理员个人中心页数据填充
        const adminCenterName = document.getElementById('admin-center-name')
        const adminCenterPhone = document.getElementById('admin-center-phone')
        const adminCenterCommunity = document.getElementById('admin-center-community')
        if (adminCenterName) adminCenterName.textContent = adminUser.name
        if (adminCenterPhone) adminCenterPhone.textContent = `手机号: ${adminUser.phone}`
        if (adminCenterCommunity)
          adminCenterCommunity.textContent = `所属小区: ${adminUser.communityName}`

        // 用户审核列表页
        const approvalContainer = document.getElementById('approval-list-container')
        const approvalPanel = document.getElementById('approval-list-container-panel')
        let approvalListActiveTab = 0
        let approvalListData = mockData.approvals
        if (approvalContainer) {
          approvalContainer.innerHTML = ''
          const tabs = [
            { title: '待审核', status: '待审核' },
            { title: '已通过', status: '已通过' },
            { title: '已驳回', status: '已驳回' },
          ]
          // 新增navbar容器
          let approvalNavbar = document.createElement('div')
          approvalNavbar.className = 'weui-navbar'
          approvalPanel.insertBefore(approvalNavbar, approvalPanel.firstChild.nextSibling)
          function renderApprovalTabs() {
            // 渲染navbar
            approvalNavbar.innerHTML = ''
            tabs.forEach((tab, index) => {
              const tabDiv = document.createElement('div')
              tabDiv.className =
                'weui-navbar__item' + (index === approvalListActiveTab ? ' weui-bar__item_on' : '')
              tabDiv.setAttribute('data-tab', index)
              tabDiv.textContent = tab.title
              tabDiv.onclick = function () {
                approvalListActiveTab = parseInt(this.getAttribute('data-tab'))
                renderApprovalTabs()
              }
              approvalNavbar.appendChild(tabDiv)
            })
            // 渲染内容
            let tabContentHTML = ''
            const filteredApprovals = approvalListData.filter(
              (a) => a.status === tabs[approvalListActiveTab].status
            )
            if (filteredApprovals.length > 0) {
              filteredApprovals.forEach((a, idx) => {
                tabContentHTML += `
                  <div class="weui-media-box weui-media-box_text weui-cell_active weui-cell_access approval-item" data-idx="${idx}" style="margin-bottom: 0;">
                    <h4 class="weui-media-box__title">${a.applicantName} - ${a.roleType}</h4>
                    <p class="weui-media-box__desc">申请房产：${a.propertyInfo}</p>
                    <p class="weui-media-box__desc">申请时间：${a.applyTime}</p>
                    <div class="weui-cell__ft"></div>
                  </div>
                `
              })
            } else {
              tabContentHTML +=
                '<div class="weui-loadmore weui-loadmore_line"><span class="weui-loadmore__tips">暂无数据</span></div>'
            }
            approvalContainer.innerHTML = tabContentHTML
            // 绑定点击事件
            const approvalItems = approvalContainer.querySelectorAll('.approval-item')
            approvalItems.forEach((item, i) => {
              item.onclick = function () {
                showApprovalDetail(filteredApprovals[i])
              }
            })
          }
          renderApprovalTabs()
        }

        // 用户管理列表
        const managedUsersList = document.querySelector('#managed-users-list .weui-panel__bd')
        if (managedUsersList) {
          managedUsersList.innerHTML = ''
          if (mockData.managedUsers && mockData.managedUsers.length > 0) {
            mockData.managedUsers.forEach((user) => {
              const userCell = document.createElement('div')
              userCell.className =
                'weui-media-box weui-media-box_text weui-cell_active weui-cell_access'
              userCell.innerHTML = `
                <h4 class="weui-media-box__title">${user.name} (${user.roleType})</h4>
                <p class="weui-media-box__desc">手机号: ${user.phone}</p>
                <p class="weui-media-box__desc">房产: ${user.propertyInfo}</p>
                <div class="weui-cell__ft"></div>
              `
              managedUsersList.appendChild(userCell)
            })
          } else {
            managedUsersList.innerHTML =
              '<div class="weui-loadmore weui-loadmore_line"><span class="weui-loadmore__tips">暂无用户</span></div>'
          }
        }

        // 用户详情页（物业端，WeUI预览结构，参考流水详情）
        const managedUserDetails = document.getElementById('managed-user-details')
        if (managedUserDetails) {
          const user = mockData.managedUsers[0]
          if (user) {
            managedUserDetails.innerHTML = `
              <div class="weui-form-preview__hd">
                <div class="weui-form-preview__item">
                  <label class="weui-form-preview__label">姓名</label>
                  <em class="weui-form-preview__value">${user.name}</em>
                </div>
              </div>
              <div class="weui-form-preview__bd">
                <div class="weui-form-preview__item">
                  <label class="weui-form-preview__label">手机号</label>
                  <span class="weui-form-preview__value">${user.phone}</span>
                </div>
                <div class="weui-form-preview__item">
                  <label class="weui-form-preview__label">角色</label>
                  <span class="weui-form-preview__value">${user.roleType}</span>
                </div>
                <div class="weui-form-preview__item">
                  <label class="weui-form-preview__label">房产信息</label>
                  <span class="weui-form-preview__value">${user.propertyInfo}</span>
                </div>
              </div>
            `
          } else {
            managedUserDetails.innerHTML =
              '<div class="weui-loadmore weui-loadmore_line"><span class="weui-loadmore__tips">暂无用户详情</span></div>'
          }
        }

        // 资金公示页顶部业主信息入口数据填充
        const residentUserInfo = mockData.currentUser.resident
        const residentCommunity = document.getElementById('resident-community')
        const residentName = document.getElementById('resident-name')
        const residentPhone = document.getElementById('resident-phone')
        if (
          residentCommunity &&
          residentUserInfo.properties &&
          residentUserInfo.properties.length > 0
        )
          residentCommunity.textContent = residentUserInfo.properties[0].communityName
        if (residentName) residentName.textContent = residentUserInfo.name
        if (residentPhone) residentPhone.textContent = `手机号: ${residentUserInfo.phone}`

        // --- PC View Vue Instance ---
        new Vue({
          el: '#pc-app',
          data: {
            mockData: mockData,
          },
        })
      })
    </script>
  </body>
</html>
